<!--
 * @Descripttion: 功能清单管理
 * @Author: YuZhenJing
 * @Date: 2020-01-14 09:20:25
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:35:09
 -->
<template>
  <div class="menu-list">
    <div>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card body-style="padding:8px;">
            <div class="tree-box">
              <el-input
                placeholder="输入想查询的功能清单进行过滤"
                style="margin-bottom:10px;"
                v-model="filterText"
              ></el-input>
              <el-tree
                :data="menuData"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :render-content="renderContent"
                @node-click="menuNodeClick"
                default-expand-all
                highlight-current
                node-key="funListCode"
                ref="menuTree"
              ></el-tree>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card body-style="padding:8px">
            <div class="details-box">
              <el-divider content-position="left">
                <span class="text-h6">详细信息</span>
              </el-divider>
              <div style="padding:10px" v-if="details.funListCode">
                <el-form :model="details">
                  <el-row :gutter="12">
                    <el-col :lg="12" :md="24">
                      <el-form-item label="排序标识:">
                        <el-input
                          disabled
                          v-model="details.funListOrder"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="24">
                      <el-form-item label="功能清单图标:">
                        <el-input disabled v-model="details.funListIcon">
                          <template slot="append">
                            <i :class="details.funListIcon"></i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="24">
                      <el-form-item label="功能清单名称:">
                        <el-input
                          disabled
                          v-model="details.funListName"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="24">
                      <el-form-item label="功能清单类别:">
                        <el-input
                          disabled
                          v-model="details.funListTypeName"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="24">
                      <el-form-item label="功能清单路径:">
                        <el-input
                          disabled
                          v-model="details.funListUrl"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="24">
                      <el-form-item label="创建时间:">
                        <el-input
                          disabled
                          v-model="details.creatorDate"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div v-else>
                <el-card
                  body-style="height:120px;line-height:120px;text-align:center"
                >
                  <span class="text-h6">选择左侧菜单，查看菜单详细信息</span>
                </el-card>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <menu-add
      ref="menuAddRef"
      @menuTreeData="menuTreeData"
      :funListTypeOptions="funListTypeOptions"
    ></menu-add>
    <menu-edit
      ref="menuEditRef"
      @menuTreeData="menuTreeData"
      :funListTypeOptions="funListTypeOptions"
    ></menu-edit>
    <platform-menu-add
      ref="platformMenuAddRef"
      @menuTreeData="menuTreeData"
      :funListTypeOptions="funListTypeOptions"
    ></platform-menu-add>
    <platform-menu-edit
      ref="platformMenuEditRef"
      @menuTreeData="menuTreeData"
      :funListTypeOptions="funListTypeOptions"
    ></platform-menu-edit>
    <menu-points-list ref="pointsManagerRef"></menu-points-list>
  </div>
</template>
<script>
import * as menuService from '@/service/menu'
export default {
  components: {
    'menu-add': require('@/components/module/menu/MenuAdd').default,
    'menu-edit': require('@/components/module/menu/MenuEdit').default,
    'menu-points-list': require('@/components/module/menu/MenuPointsList')
      .default,
    'platform-menu-add': require('@/components/module/menu/PlatformMenuAdd')
      .default,
    'platform-menu-edit': require('@/components/module/menu/PlatformMenuEdit')
      .default
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  data() {
    return {
      // 功能清单类别数据集
      funListTypeOptions: [],
      // 过滤文本
      filterText: '',
      // 功能清单数据
      menuData: [],
      // 功能清单详情
      details: {},
      // 窗体相关参数
      windowItem: {
        menuAddChildren: {
          show: false
        }
      }
    }
  },
  methods: {
    ...menuService,
    // 单击节点
    menuNodeClick(data) {
      if (data.isRoot) {
        this.details = {}
      } else {
        this.details = data
      }
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.funListName.indexOf(value) !== -1
    },
    //增加下级菜单
    handleCommand(command, data) {
      if (command == 'addPlatform') {
        this.$refs.platformMenuAddRef.show()
      } else if (command == 'editPlatform') {
        this.$refs.platformMenuEditRef.show(data.funListCode)
      } else if (command == 'addMenu') {
        this.$refs.menuAddRef.show(data.funListOrder, data.selfLevelCode)
      } else if (command == 'delete') {
        this.delMenu(data)
      } else if (command == 'editMenu') {
        this.$refs.menuEditRef.show(data.funListCode)
      } else if (command == 'points') {
        this.$refs.pointsManagerRef.show(data.funListCode)
      }
    },
    // 自定义节点
    renderContent(h, { node, data, store }) {
      let _dropdownItem = nodeType => {
        if (data.isRoot) {
          if (nodeType == 'addPlatform') {
            return (
              <el-dropdown-item icon="el-icon-edit" command="addPlatform">
                增加平台节点
              </el-dropdown-item>
            )
          }
        } else {
          if (data.parentLevelCode == null) {
            if (nodeType == 'editPlatform') {
              return (
                <el-dropdown-item icon="el-icon-edit" command="editPlatform">
                  编辑平台节点
                </el-dropdown-item>
              )
            }
          } else {
            if (nodeType == 'editMenu') {
              return (
                <el-dropdown-item icon="el-icon-edit" command="editMenu">
                  编辑本级菜单
                </el-dropdown-item>
              )
            }
            if (nodeType == 'delete') {
              return (
                <el-dropdown-item icon="el-icon-delete" command="delete">
                  删除本级菜单
                </el-dropdown-item>
              )
            }
          }
          if (data.funListType == 'group') {
            if (nodeType == 'addMenu') {
              return (
                <el-dropdown-item icon="el-icon-folder-add" command="addMenu">
                  增加下级菜单
                </el-dropdown-item>
              )
            }
          } else {
            if (nodeType == 'points') {
              return (
                <el-dropdown-item
                  icon="el-icon-c-scale-to-original"
                  command="points"
                >
                  功能点管理
                </el-dropdown-item>
              )
            }
          }
        }
      }
      return (
        <span class="custom-tree-node">
          <span>
            {h('span', [
              h('i', {
                class: data.funListIcon
              }),
              h('span', data.funListName)
            ])}
          </span>
          <span>
            <el-dropdown
              trigger="click"
              placement="top"
              on-command={command => this.handleCommand(command, data)}
            >
              <span class="el-dropdown-link">
                <i class="el-icon-s-operation text-primary"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="asm-body">
                {_dropdownItem('addPlatform')}
                {_dropdownItem('editPlatform')}
                {_dropdownItem('addMenu')}
                {_dropdownItem('editMenu')}
                {_dropdownItem('points')}
                {_dropdownItem('delete')}
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      )
    }
  },
  mounted() {
    this.searchFunListTypeOptions()
    this.menuTreeData()
  }
}
</script>
<style lang="stylus" scope>
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px
  .el-dropdown-link
    font-size 16px
.tree-box
  height calc(100vh - 100px)
.details-box
  height calc(100vh - 123px)
</style>
